import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Col, Button, Form, Modal, TreeSelect, Input } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;
const { TreeNode } = TreeSelect;
const ProductModelEditForm = Form.create()(props => {
  const { modalVisible, form, handleModalVisible, detail, handleEdit, modelClassData } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleEdit(fieldsValue, form);
    });
  };
  // 组件树形控件 子节点渲染
  const renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.name} key={item.id} value={item.id}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.name} key={item.id} value={item.id}></TreeNode>;
    });

  return (
    <Modal
      title={formatMessage({ id: 'app.mm.productmodel.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      maskClosable={false}
      onCancel={() => handleModalVisible()}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
          {form.getFieldDecorator('id', { initialValue: detail.id })(<Input type="hidden" />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.productmodel.info.name' })} colon={false}>
          {form.getFieldDecorator('name', {
            initialValue: detail.name ? detail.name : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.info.name.place' }),
              },
            ],
          })(<Input placeholder={formatMessage({ id: 'app.mm.productmodel.info.name.place' })} />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.productmodel.info.class' })} colon={false}>
          {form.getFieldDecorator('classId', {
            initialValue: detail.classId ? detail.classId : undefined,
            message: formatMessage({ id: 'app.mm.productmodel.info.class.place' }),
          })(
            <TreeSelect
              showSearch
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder={formatMessage({ id: 'app.mm.productmodel.info.class.place' })}
              allowClear
              treeDefaultExpandAll
            >
              {renderTreeNodes(modelClassData)}
            </TreeSelect>,
          )}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.mm.productmodel.info.desc' })} colon={false}>
          {form.getFieldDecorator('desc', {
            initialValue: detail.desc ? detail.desc : undefined,
            rules: [],
          })(<TextArea rows={4} />)}
        </FormItem>
      </div>
    </Modal>
  );
});

@connect(({ productmodel, loading }) => ({
  productmodel,
  loading: loading.models.productmodel,
}))
class ProductModelInfo extends PureComponent {
  state = {
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'productmodel/tree',
    });
  }

  handleEdit = (fields, form) => {
    const { dispatch } = this.props;
    const { handleModalVisible } = this;
    dispatch({
      type: 'productmodel/edit',
      payload: {
        id: fields.id,
        name: fields.name,
        classId: fields.classId,
        desc: fields.desc,
      },
      form,
      handleModalVisible,
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const edit = (id, flag) => {
      this.setState({
        modalVisible: !!flag,
      });
    };
    const {
      productmodel: { detail, treeData },
    } = this.props;

    const parentMethods = {
      handleModalVisible: this.handleModalVisible,
      handleEdit: this.handleEdit,
      detail,
      modelClassData: treeData,
    };

    const { modalVisible } = this.state;

    return (
      <Fragment>
        <Row style={{ textAlign: 'right' }}>
          <Button onClick={() => edit(detail.id, true)} type="primary">
            <FormattedMessage id="app.dm.product.detail.info.edit" />
          </Button>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.mm.productmodel.info.name" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {detail.name}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.mm.productmodel.info.class" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {detail.className}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.mm.productmodel.info.desc" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={5}>
            {detail.desc}
          </Col>
        </Row>
        <ProductModelEditForm {...parentMethods} modalVisible={modalVisible} />
      </Fragment>
    );
  }
}
export default ProductModelInfo;
